<template>
  <div class="user-info-container">
    <div class="user-info-content">
      <img class="left-avatar" src="" alt="" />
      <div class="right-info">
        <div class="name">Yin.Shi，欢迎您</div>
        <div class="account">Yin.Shi</div>
        <!-- <div v-if="activeItem == 0" class="password-content">
          <div class="label">修改密码</div>
          新密码：
          <el-input v-model="pwd1" clearable></el-input>
          确认新密码:
          <el-input v-model="pwd2" clearable></el-input>
          <el-button>取消</el-button>
          <el-button type="primary">确认</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //   activeItem: {
  //     type: Number,
  //     default: 0,
  //   },
  // },
  data() {
    return {
      pwd1: "",
      pwd2: "",
    };
  },
};
</script>

<style lang="less" scoped>
.user-info-container {
  padding-right: 115px;
  box-sizing: border-box;
  .user-info-content {
    padding: 30px 0 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    .left-avatar {
      width: 141px;
      height: 141px;
      border-radius: 50%;
      margin-right: 42px;
    }
    .right-info {
      .name,
      .account {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: var(--color-user-text);
        margin-top: 32px;
      }
      .account {
        margin-top: 53px;
      }
      // .password-content {
      //   margin-top: 28px;
      //   height: 25px;
      //   display: flex;
      //   align-items: center;
      //   left: 10px;
      //   font-size: 14px;
      //   font-weight: 400;
      //   color: var(--color-user-text);
      //   .label {
      //     margin: 0 72px 0 10px;
      //     color: var(--color-label-text);
      //   }
      //   /deep/ .el-input {
      //     width: 105px;
      //     margin: 0 10px;
      //   }
      //   /deep/ .el-input__inner {
      //     height: 25px;
      //     line-height: 25px;
      //     border: 1px solid var(--border-color);
      //     background: #fff !important;
      //   }
      //   /deep/ .el-button {
      //     width: 52px;
      //     height: 25px;
      //     border: 0;
      //     font-size: 13px;
      //     font-weight: 400;
      //     padding: 0 13px;
      //     border-radius: 2px;
      //   }
      //   /deep/ .el-button--default {
      //     background-color: #d7d7d7;
      //     color: #333333;
      //   }
      //   /deep/ .el-button--primary {
      //     background: var(--color-primary);
      //     color: #fff;
      //   }
      // }
    }
  }
}
</style>
